<template>
    <div>
        <ul class="hall-component-list">
            <li class="hall-component-item" v-for=" list in historyComment">
                <div class="hall-component-face">
                    <img v-lazy="{src:list.sender.faceurl ,error: errimg, loading:errimg}"/>
                </div>
                <div class="hall-component-info">
                    <div class="hall-component-title">
                        <p class="hall-component-time"> {{list.sendtime}}</p>
                        <p class="hall-component-name"> {{(list.context?getStringJsonValLiveroom(list.context):'')+list.sender.nickname}}</p>
                    </div>
                    <div class="hall-component-content">
                        {{list.content}}
                        <div v-for="(alist,index) in list.accessories">
                            <div class="hall-component-content-pic" v-if="alist.type=='picture2'">
                                <ul>
                                    <li
                                        :class="'img hall-pic-'+list.accessories.length+' imgn_'+index">
                                        <img v-lazy="alist.thumbUrls[0]+'?cmd=imageprocess/processtype/2/quality/100/width/500'"
                                             @click="clickImg(alist.thumbUrls[0])"/>

                                    </li>
                                </ul>
                            </div>

                            <audio v-if="alist.type=='audio2'" :src="getFirstUrl(alist.url)" height="100%" width="100%"
                                   controls="controls">
                                您的浏览器不支持 audio 标签。
                            </audio>
                            <div class="hall-video-div" v-if="alist.type=='videomessage2'">
                                <img :src="alist.thumbUrls[0]" class="hall-video-poster"/>
                                <img src="../assets/images/play.png" class="hall-video-play"/>
                                <div class="hall-video-openapp" @click="openapp();">请打开扬帆App观看</div>
                                <!-- <video v-bind:src="getFirstUrl(alist.url)"
                                        v-bind:poster="alist.thumbUrls[0]"
                                        controls="controls" height="100%" width="100%"></video>-->
                            </div>
                        </div>
                    </div>


                </div>
                <div class="clearBoth"></div>
            </li>

        </ul>
        <div class="hall-add-more" @click="getmorehall" v-show="addmore"> 加载更多</div>
        <div class="hall-add-more"  v-show="!addmore"> 没有更多</div>
    </div>
</template>

<script>

    export default {
        props: {
            topicid: {
                type: String,
                default: ""
            }
        },
        data: function() {
            return {
                errimg: require("../assets/images/user.png"),
                addmore: true,
                historyComment: [],
                msghisArrayTmp: [],
                imEndTime: 0,
                appkey: "",// 新评论系统的appkey
                appsecret: "",// 新评论系统的企业秘钥
                paasImServerUrl: "",// 新评论系统地址
            };
        },
        mounted: function() {
            this.gethalls(this.topicid);
            if(this.$route.name=="Live"){
                if($(".fixedBottom").is(':hidden')){
                    $(".edit-component-container").css("bottom","0");
                    $(".edit-takeup").css("height","3.8rem");
                    $("#live_hall_container").css("padding-bottom","0");
                }
            }
        },
        methods: {
        clickImg :function(e) {
            // 获取当前图片地址
            this.$emit('imgSrc', e)

        },
            openapp:function(){
                openDownPage(1, this.$route.params.programid);
            },
            gethalls: function(topicId) {
                let that = this;
                // topicId = "5b9233d48a3b951720186b29";// 测试用
                // 获取设置参数
                function getImParam() {
                    that.axios.get(
                      /*  'https://yfhefei.butel.com:44335/setsail/external/externalService?service=getcommnetsys'*/
                        interbaseUrl
                        + 'setsail/external/externalService?service=getcommnetsys'
                    )
                        .then(response => {
                            if (response.data.state == 1000) {
                                that.appkey = response.data.data.appkey;
                                that.appsecret = response.data.data.appsecret;
                                that.paasImServerUrl = response.data.data.paasImServerUrl.replace("https:","").replace("http:","");
                                PaaSWebIM.setOptions({
                                    paasimHost: that.paasImServerUrl,
                                    appkey: that.appkey,
                                    appsecret: that.appsecret
                                });
                                imLogin();
                            }
                        });
                }

                // 登录群组
                function imLogin() {
                    var imUserInfo = {};
                    //注意每个数字代表的含义，比如，
                    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息等
                    var onGroupSystemNotifys = {};

                    var imListeners = {
                        "jsonpCallback": jsonpCallback, //IE9(含)以下浏览器用到的jsonp回调函数,移动端可不填，pc端必填
                        "onBigGroupMsgNotify": onBigGroupMsgNotify, //监听新消息(大群)事件，必填
                        "onMsgNotify": onMsgNotify,//监听新消息(私聊(包括普通消息和全员推送消息)，普通群(非直播聊天室)消息)事件，必填
                        "onGroupSystemNotifys": onGroupSystemNotifys, //监听（多终端同步）群系统消息事件，必填
                    }
                    //登录IM 获取实时消息
                    var imOptions = {
                        'isAccessFormalEnv': true,//是否访问正式环境，默认访问正式，选填
                        'isLogOn': true//是否开启控制台打印日志,默认开启，选填
                    };
                    PaaSWebIM.login(imUserInfo, imListeners, imOptions, loginOK, loginErr);
                }
                function jsonpCallback(rspData) {
                    //设置接口返回的数据
                    PaaSWebIM.setJsonpLastRspData(rspData);
                }
                // 监听大群消息
                function onBigGroupMsgNotify(msgList) {
                    if (!msgList || msgList.length == 0) {
                        console.info(msgList);
                        return;
                    }
                    for (var i = 0; i < msgList.length; i++) {
                        var msg = msgList[i];
                        var elems = msg.elems;
                        if (elems && elems.length > 0) {
                            for (var j = 0; j < elems.length; j++) {
                                var data = elems[j].content.data;
                                var value = JSON.parse(data);
                                var hdurl = '';
                                try {
                                    if (value.sender.extinfo) {
                                        var extra_info = JSON.parse(value.sender.extinfo);
                                        hdurl = extra_info['hdurl'];
                                    }
                                } catch (e) {
                                    console.log(e);
                                }
                                value.hdurl = hdurl;
                                if (value.accessories && value.accessories.length > 0) {
                                    for (var j = 0; j < value.accessories.length; j++) {
                                        var attach = value.accessories[j];
                                        if (attach.type == "picture2") {
                                            attach.thumbUrls = [];
                                            if (attach.url != undefined && attach.url != "") {
                                                attach.thumbUrls.push(attach.url);
                                            }
                                        } else if (attach.type == "videomessage2") {

                                        } else if (attach.type == "audio2") {

                                        }
                                    }
                                }
                                var ar = that.msghisArrayTmp.find(function (v) {
                                    return v == value.msgid;
                                });
                                if(ar==undefined){
                                    //加入临时数组，解决切换群组后，实时消息会收到推送最后一次发送的消息
                                    that.msghisArrayTmp.push(value.msgid);
                                    that.historyComment.unshift(value);
                                }

                            }
                        }
                    }
                }
                function onMsgNotify(newMsgList) {}
                // 新评论系统登录成功加入群组
                function loginOK() {
                    console.log("登录成功");
                    PaaSWebIM.applyJoinBigGroup(topicId, joinBigGroupOK, joinBigGroupErr);
                }
                function loginErr(data) {
                    console.log("登录失败");
                }
                // 加入大群成功后获取历史消息
                function joinBigGroupOK(data) {
                    console.log("加入大群成功");
                    //获取历史消息
                    var getMessageParams = {
                        "topicid": topicId,
                        "pagesize": 20,
                        "ascsort": false
                    }
                    console.log(JSON.stringify(getMessageParams,undefined,2));
                    console.log("appkey:"+that.appkey+";appsecret:"+that.appsecret)
                    PaaSWebIM.butelPaasGetHismessage(getMessageParams, that.appkey, that.appsecret, that.onSuccgetPaasHistoryMsg, that.onFailgetPaasHistoryMsg);
                }
                function joinBigGroupErr(data) {
                    console.log("加入大群失败");
                }

                getImParam();

            },
            //获取历史消息成功回调
            onSuccgetPaasHistoryMsg(data) {
                let that = this;
                console.log('获取历史消息成功');
           //   console.log(JSON.stringify(data,undefined,2))
                if (data.pagingrows.totalcount <20){
                    that.addmore = false;
                }
                if (data.pagingrows.rows.length > 0) {
                    that.imEndTime = data.pagingrows.rows[data.pagingrows.rows.length-1].timestamp;
                    for(var i=0;i<data.pagingrows.rows.length;i++) {
                        var value = data.pagingrows.rows[i];
                        var hdurl = '';
                        try {
                            if (value.sender.extinfo) {
                                var extra_info = JSON.parse(value.sender.extinfo);
                                hdurl = extra_info['hdurl'];
                            }
                        } catch (e) {
                            console.log(e);
                        }
                        value.hdurl = hdurl;

                        if (value.accessories.length > 0) {
                            for (var j = 0; j < value.accessories.length; j++) {
                                var attach = value.accessories[j];
                                if (attach.type == "picture2") {
                                    attach.thumbUrls = [];
                                    if (attach.url != undefined && attach.url != "") {
                                        attach.thumbUrls.push(attach.url);
                                    }
                                } else if (attach.type == "videomessage2") {

                                } else if (attach.type == "audio2") {

                                }
                            }
                        }
                        var ar = that.msghisArrayTmp.find(function (v) {
                            return v == value.msgid;
                        });
                        if (ar == undefined) {
                            that.historyComment.push(value);
                            that.msghisArrayTmp.push(value.msgid);
                        }

                    }
                    //console.log(JSON.stringify(that.historyComment,undefined,2))
                } else {
                    that.addmore = false;
                }
            },
            onFailgetPaasHistoryMsg(data) {
                console.log('获取历史消息失败');
            },
            getmorehall: function() {
                let that = this;
                var getMessageParams = {
                    "topicid": this.topicid,
                    "pagesize": 20,
                    "ascsort": false
                }
                if (that.imEndTime != 0) {
                    getMessageParams.time = that.imEndTime;
                }
                PaaSWebIM.butelPaasGetHismessage(getMessageParams, that.appkey, that.appsecret, that.onSuccgetPaasHistoryMsg, that.onFailgetPaasHistoryMsg);
            }
        }
    };
</script>

<style>
    .hall-component-list a,
    .hall-component-list a:link,
    .hall-component-list a:visited {
        color: #459af5;
        text-decoration: none;
    }

    .hall-component-list {
        padding: 0 0.4rem;
        margin: 0 auto;
    }

    .hall-component-item {
        margin: 1rem auto;
    }

    .hall-component-face {
        width: 13%;
        float: left;
    }

    .hall-component-face img {
        width: 2.4rem;
        height: 2.4rem;
        object-fit: cover;
        border-radius: 50%;
    }

    .hall-component-info {
        width: 85%;
        float: right;
    }

    .hall-component-content {
        line-height: 1.8rem;
    }

    .hall-component-title {
        line-height: 1.2rem;
        height: 2.4rem;
    }

    .hall-component-title {
        font-size: 0.9rem;
        color: #999999;
    }

    .hall-component-content {
        font-size: 1.0rem;
        color: #666666;
        word-break: break-all;
    }

    .hall-component-time {
        margin: 0;
    }

    .hall-component-name {
        margin: 0;
        color: #459af5;
    }

    .hall-component-content-pic {
        width: 100%;
    }

    .hall-component-content-pic ul {
        list-style: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .hall-component-content-pic ul li {
        list-style: none;
        float: left;
        display: inline-block;
    }

    .hall-component-content-pic .img {
        width: 32.333%;
        margin: 2px 0.5%;
        position: relative;
        height: 0;
        overflow: hidden;
        padding-bottom: 32.333%;
    }

    .hall-component-content-pic .img.hall-pic-1 {
        width: 100%;
        margin: 0;
        padding-bottom: 60%;
    }

    .hall-component-content-pic .img.hall-pic-2,
    .hall-component-content-pic .img.hall-pic-4,
    .hall-component-content-pic .img.hall-pic-5.imgn_0,
    .hall-component-content-pic .img.hall-pic-5.imgn_1 {
        width: 49%;
        margin: 2px 0.5%;
        padding-bottom: 49%;
    }

    .hall-component-content-pic .img.hall-pic-3,
    .hall-component-content-pic .img.hall-pic-6 {
        width: 32.333%;
        margin: 2px 0.5%;
        padding-bottom: 32.333%;
    }

    .hall-component-content-pic .img.hall-pic-5 {
        width: 32.333%;
        margin: 2px 0.5%;
        padding-bottom: 32.333%;
    }

    .hall-component-content-pic .img img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    .hall-add-more {
        color: #666666;
        text-align: center;
        font-size: 15px;
        margin-top: 25px;
        margin-bottom: 10px;
    }
    .hall-video-div {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding-left: 100%;
        overflow: hidden;
        padding-bottom: 56.25%;
    }

    .hall-video-div .hall-video-poster {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #000;
        z-index: 10;
    }
    .hall-video-div .hall-video-play{
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -20px;
        margin-left:-20px;
        z-index: 100;
        height: 40px;
        width: 40px;
    }
    .hall-video-div .hall-video-openapp{
        position: absolute;
        z-index: 1000;
        bottom: 12px;
        right:12px;
        font-size: 11px;
        background-color:#9852FF;
        color:#fff;
        border-radius: 100px;
        padding:6px 11px;
        line-height: 12px;

    }
</style>